<template>
    <div>
        <el-button type="text" icon="el-icon-setting" @click="visible = true">
            自定义列表
        </el-button>

        <e-dialog title="自定义列表" v-model="visible" :footer="false" width="900px">
            <div v-loading="isLoading">
                <div class="dialog-content p-l-20 p-t-20 p-r-20">
                    <el-card class="box-card all-columns" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>全部列 ({{ columns.length }})</span>
                        </div>
                        <div class="content">
                            <el-checkbox-group v-model="checkProps">
                                <el-checkbox
                                    v-for="(item, index) in columns"
                                    style="width: 50%; margin: 0; padding-right: 10px"
                                    :key="index"
                                    :label="item.props"
                                    :disabled="!!item.lock"
                                >
                                    {{ item.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-card>

                    <el-card class="box-card selected-columns" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>显示列 ({{ showColumns.length }})</span>
                        </div>
                        <div class="columns-wrapper">
                            <vuedraggable class="unfixed-list" v-model="showColumns">
                                <transition-group>
                                    <div v-for="(item, index) in showColumns" :key="item.props">
                                        <div class="item">
                                            <el-icon class="el-icon-s-fold" />
                                            <p>{{ item.label }}</p>
                                        </div>
                                    </div>
                                </transition-group>
                            </vuedraggable>
                        </div>
                    </el-card>
                </div>

                <div class="flex-center-end h-60 p-r-20">
                    <el-button size="small" type="warning" @click="reset">重 置</el-button>
                    <el-button size="small" type="info" @click="handleClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="submit">确 定</el-button>
                </div>
            </div>
        </e-dialog>
    </div>
</template>

<script>
export default {
    name: 'TableFileter',
    props: {
        storageId: {
            type: String,
            require: true,
        },
        columns: {
            type: Array,
            required: true,
            default: () => [],
        },
    },
    data() {
        return {
            visible: false,
            isLoading: true,
            checkProps: [], // 显示列[props]
            showColumns: [], //
        }
    },
    watch: {
        visible(value) {
            if (value) {
                let storageColumns = this.getLocalStorage(this.storageId + '_table', [])
                // 找出已经存在并且在当前配置中依然存在的props
                this.checkProps = storageColumns.filter(item=>item.show_old === true).map(item=>item.props).filter(item=>{
                    return this.columns.find(itey=>itey.props===item)
                })
                this.columns.forEach((item) => {
                    if(!item.lock && item.show_old === undefined && !this.checkProps.includes(item.props) && !storageColumns.find(itey=>itey.props === item.props)){
                        // 新增的，默认显示
                        this.checkProps.push(item.props)
                    }
                })

                if (storageColumns.length === 0) {
                    // 默认显示所有列
                    this.checkProps = this.columns
                        .filter((item) => !item.lock)
                        .map((item) => item.props)
                }
                // 判断是否已经挂载vuedraggable
                if (window.vuedraggable) {
                    this.isLoading = false
                    return
                }
                this.getIndexDBJS([
                    {
                        js: 'http://47.108.195.190:5000/netdist/Sortablemin-1729685014570~1~.js',
                    },
                ]).then(() => {
                    this.getIndexDBJS([
                        {
                            js: 'http://47.108.195.190:5000/netdist/vuedraggable-1729685021040~1~.js',
                        },
                    ]).then(() => {
                        this.isLoading = false
                        Vue.component('vuedraggable', window.vuedraggable)
                    })
                })
            }
        },
        checkProps(val) {
            const result = []
            val.forEach(item=>{
                const item1 = this.columns.find(itey=>itey.props===item)
                if(item1){
                    result.push(item1)
                }
            })
            this.showColumns = result
        },
    },
    methods: {
        // 保存数据
        submit() {
            const { storageId } = this
            if (storageId) {
                // 保存方式为新增show_old字段,true表示显示，false表示不显示
                const result = this.showColumns.map((item) => {
                    return {
                        ...item,
                        show_old: true,
                    }
                })

                this.columns.forEach((item) => {
                    if (!item.lock && !this.checkProps.includes(item.props)) {
                        result.push({
                            ...item,
                            show_old: false,
                        })
                    }
                })

                this.setLocalStorage(this.storageId + '_table', result)
            }
            this.$emit('update', true)
            this.handleClose()
        },
        handleClose() {
            this.visible = false
        },
        reset() {
            this.$confirm('确定重置缓存？')
                .then((res) => {
                    const { storageId } = this
                    if (storageId) {
                        this.removeLocalStorage(this.storageId + '_table')
                    }
                    this.$emit('update', true)
                    this.handleClose()
                })
                .catch(() => {})
        },
    },
}
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    justify-content: space-between;

    ::v-deep .el-card__body {
        padding-bottom: 0px !important;
    }

    .all-columns {
        flex: 1;
    }
    .selected-columns {
        width: 300px;
        margin-left: 20px;
        ::v-deep .el-card__body {
            padding: 0;
            height: 462px;
            overflow-y: scroll;

            .lock-list {
                width: 100%;
                display: flex;
                padding: 5px 10px;
                border-bottom: #ddd solid 1px;
                .item {
                    background: #fcfcfc;
                    border-radius: 5px;
                    padding: 3px 5px;
                    color: #999;
                    border: #ebebeb solid 1px;
                    margin-right: 5px;
                    i {
                        font-size: 16px;
                    }
                }
            }
            .columns-wrapper {
                width: 100%;
                height: auto;
                overflow: hidden;
                // border: #ddd solid 1px;
                border-radius: 3px;
                background: #fff;
                padding: 5px 10px;

                .fixed-list {
                    border-bottom: #ddd solid 1px;
                    margin-bottom: 8px;
                    .item {
                        background: #f5f5f5;
                        color: #666;
                        border: #ebebeb solid 1px;
                    }
                }
                .item {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    padding: 0 5px;
                    background: #b3d8ff;
                    color: #666;
                    border-radius: 5px;
                    // border-bottom: #ddd solid 1px;
                    cursor: move;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    p {
                        flex: 1;
                        padding: 0 5px;
                    }
                    .fixed-icon {
                        cursor: pointer;
                        margin-right: 5px;
                        font-size: 16px;
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }
    .content {
        // padding: 10px 0;
        max-height: 400px;
        overflow: auto;
        margin-top: 10px;
    }

    ::v-deep .el-card__header {
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        background: #f4f4f4;
        display: flex;
        padding: 0 10px;
        align-items: center;
        justify-content: space-between;
    }
    ::v-deep .el-card__body {
        padding: 10px;
    }
    ::v-deep .el-checkbox {
        padding: 5px 0;
    }
}
</style>
